<template>
  <PageWrapper>
    <div class="lg:flex">
      <div class="lg:w-10/10 w-full !mr-4 enter-y">
        <!-- 图表容器 -->
        <div class="mb-4">
          <!-- 今日数据量 - 柱状图 -->
          <Card :title="t('workbenchTitle.todayData')" :loading="loading" class="h-[300px]">
            <div ref="todayDataChartRef" :style="{ width: '100%', height: '240px' }"></div>
          </Card>
        </div>

        <div class="mb-4">
          <!-- 每日总量 - 折线图 -->
          <Card :title="t('workbenchTitle.dailyTotal')" :loading="loading" class="h-[300px]">
            <div ref="dailyTotalChartRef" :style="{ width: '100%', height: '240px' }"></div>
          </Card>
        </div>

        <div class="mb-4">
          <!-- 窗口运行数 - 柱状图 -->
          <Card :title="t('workbenchTitle.windowCount')" :loading="loading" class="h-[400px]">
            <!-- 时间范围选择器 - 下拉框样式 -->
            <div class="flex justify-end mb-2">
              <Select
                v-model:value="windowCountTimeRange"
                style="width: 120px"
                @change="handleWindowCountTimeRangeChange"
              >
                <Option value="1">{{ t('workbenchTimeRange.fiveMinutes') }}</Option>
                <Option value="2">{{ t('workbenchTimeRange.oneHour') }}</Option>
                <Option value="3">{{ t('workbenchTimeRange.oneDay') }}</Option>
              </Select>
            </div>
            <div ref="windowCountChartRef" :style="{ width: '100%', height: '300px' }"></div>
          </Card>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted, Ref } from 'vue';
  import { Card, Select } from 'ant-design-vue';
  import { PageWrapper } from '@/components/Page';
  import { useECharts } from '@/hooks/web/useECharts';
  import { useI18n } from '@/hooks/web/useI18n';
  import {
    statisticNodeStatistic,
    statisticDataRunningConditionByHours,
    statisticDataRunningConditionByDays,
  } from '@/api/demo/analysis';

  const { Option } = Select;
  const { t } = useI18n('routes.dashboard');

  const loading = ref(true);
  const windowCountTimeRange = ref('1');
  const handleWindowCountTimeRangeChange = (value: any) => {
    // 处理时间范围变更逻辑
    console.log(t('workbenchMessage.timeRangeChanged'), value);
    statisticNodeStatisticinit();
  };
  const statisticNodeStatisticinit = () => {
    statisticNodeStatistic({
      statisticSection: windowCountTimeRange.value,
    }).then((res) => {
      windowCountData.value = res.data;
      updateWindowCountChart();
    });
  };
  const windowCountData = ref([]);
  const todayDataData = ref([]);
  const dailyTotalData = ref([]);

  // 初始化今日数据量数据
  const initTodayData = () => {
    statisticDataRunningConditionByHours().then((res) => {
      todayDataData.value = res.data || [];
      updateTodayDataChart();
    });
  };

  // 初始化每日总量数据
  const initDailyTotal = () => {
    statisticDataRunningConditionByDays().then((res) => {
      dailyTotalData.value = res.data || [];
      updateDailyTotalChart();
    });
  };

  // 处理窗口数据，转换为堆叠图表格式
  const processWindowCountData = () => {
    if (!windowCountData.value || windowCountData.value.length === 0) {
      return {
        xAxisData: [],
        seriesData: {
          busyNodes: [],
          freeNodes: [],
          offlineNodes: [],
          abnormalNodes: [],
        },
        originalTimes: [],
      };
    }

    // 按 statisticTime 分组并汇总数据
    const timeMap = new Map();
    windowCountData.value.forEach((item: any) => {
      const time = item.statisticTime;
      if (!timeMap.has(time)) {
        timeMap.set(time, {
          busyNodes: 0,
          freeNodes: 0,
          offlineNodes: 0,
          abnormalNodes: 0,
        });
      }
      const data = timeMap.get(time);
      data.busyNodes += item.busyNodes || 0;
      data.freeNodes += item.freeNodes || 0;
      data.offlineNodes += item.offlineNodes || 0;
      data.abnormalNodes += item.abnormalNodes || 0;
    });

    // 按时间排序
    const sortedTimes = Array.from(timeMap.keys()).sort();

    // 格式化时间标签：只显示时分部分
    const formatTimeLabel = (timeStr: string) => {
      if (!timeStr) return '';
      // 如果格式是 "2025-11-21 15:25"，只取 "15:25"
      const parts = timeStr.split(' ');
      if (parts.length > 1) {
        return parts[1]; // 返回时分部分
      }
      return timeStr;
    };

    const xAxisData = sortedTimes.map(formatTimeLabel);
    const seriesData = {
      busyNodes: sortedTimes.map((time) => timeMap.get(time).busyNodes),
      freeNodes: sortedTimes.map((time) => timeMap.get(time).freeNodes),
      offlineNodes: sortedTimes.map((time) => timeMap.get(time).offlineNodes),
      abnormalNodes: sortedTimes.map((time) => timeMap.get(time).abnormalNodes),
    };

    return { xAxisData, seriesData, originalTimes: sortedTimes };
  };

  // 处理今日数据量数据
  const processTodayData = () => {
    if (!todayDataData.value || todayDataData.value.length === 0) {
      return {
        xAxisData: [],
        seriesData: {
          listTaskNumber: [],
          detailTaskNumber: [],
          processNumber: [],
          imageNumber: [],
          avatorNumber: [],
        },
      };
    }

    // 按时间排序
    const sortedData = [...todayDataData.value].sort((a: any, b: any) => {
      return new Date(a.statisticTime).getTime() - new Date(b.statisticTime).getTime();
    });

    const xAxisData = sortedData.map((item: any) => item.statisticTime);
    const seriesData = {
      listTaskNumber: sortedData.map((item: any) => item.listTaskNumber || 0),
      detailTaskNumber: sortedData.map((item: any) => item.detailTaskNumber || 0),
      processNumber: sortedData.map((item: any) => item.processNumber || 0),
      imageNumber: sortedData.map((item: any) => item.imageNumber || 0),
      avatorNumber: sortedData.map((item: any) => item.avatorNumber || 0),
    };

    return { xAxisData, seriesData };
  };

  // 处理每日总量数据
  const processDailyTotalData = () => {
    if (!dailyTotalData.value || dailyTotalData.value.length === 0) {
      return {
        xAxisData: [],
        seriesData: {
          listTaskNumber: [],
          detailTaskNumber: [],
          processNumber: [],
          imageNumber: [],
          avatorNumber: [],
        },
      };
    }

    // 按时间排序
    const sortedData = [...dailyTotalData.value].sort((a: any, b: any) => {
      return new Date(a.statisticTime).getTime() - new Date(b.statisticTime).getTime();
    });

    // 格式化时间标签
    const formatTimeLabel = (timeStr: string) => {
      if (!timeStr) return '';
      const parts = timeStr.split(' ');
      if (parts.length > 1) {
        return parts[1]; // 返回时分部分
      }
      return timeStr;
    };

    const xAxisData = sortedData.map((item: any) => formatTimeLabel(item.statisticTime));
    const seriesData = {
      listTaskNumber: sortedData.map((item: any) => item.listTaskNumber || 0),
      detailTaskNumber: sortedData.map((item: any) => item.detailTaskNumber || 0),
      processNumber: sortedData.map((item: any) => item.processNumber || 0),
      imageNumber: sortedData.map((item: any) => item.imageNumber || 0),
      avatorNumber: sortedData.map((item: any) => item.avatorNumber || 0),
    };

    return { xAxisData, seriesData };
  };

  // 更新今日数据量图表
  const updateTodayDataChart = () => {
    const { xAxisData, seriesData } = processTodayData();

    setTodayDataOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(150, 150, 150, 0.1)',
          },
        },
        backgroundColor: 'rgba(255, 255, 255, 0.98)',
        borderColor: '#e8e8e8',
        borderWidth: 1,
        padding: [12, 16],
        textStyle: {
          color: '#333',
          fontSize: 12,
        },
        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 6px;',
        formatter: function (params: any) {
          if (!params || params.length === 0) return '';
          let result = `<div style="font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">${t('workbenchChart.time')}: ${params[0].name}</div>`;
          params.forEach((item: any) => {
            result += `<div style="margin: 4px 0;">${item.marker}<span style="margin-left: 8px;">${item.seriesName}: <span style="font-weight: 600; color: ${item.color};">${item.value}</span></span></div>`;
          });
          const total = params.reduce((sum: number, item: any) => sum + (item.value || 0), 0);
          result += `<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; font-weight: 600; color: #1890ff;">${t('workbenchChart.total')}: ${total}</div>`;
          return result;
        },
      },
      legend: {
        data: [
          t('workbenchChart.listTask'),
          t('workbenchChart.detailTask'),
          t('workbenchChart.nsfwNumber'),
          t('workbenchChart.imageNumber'),
          t('workbenchChart.avatorNumber'),
        ],
        top: 10,
        itemGap: 15,
        textStyle: {
          fontSize: 11,
          color: '#666',
        },
        icon: 'roundRect',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '18%',
        containLabel: true,
        backgroundColor: '#fff',
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 0,
          interval: 0,
          fontSize: 11,
          color: '#666',
          margin: 8,
        },
        axisLine: {
          lineStyle: {
            color: '#e8e8e8',
            width: 1,
          },
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#e8e8e8',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#666',
          fontSize: 11,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed',
            width: 1,
          },
        },
      },
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut',
      series: [
        {
          name: t('workbenchChart.listTask'),
          type: 'bar',
          data: seriesData.listTaskNumber,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#1890ff' },
                { offset: 1, color: '#0050b3' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(24, 144, 255, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(24, 144, 255, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.detailTask'),
          type: 'bar',
          data: seriesData.detailTaskNumber,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#722ed1' },
                { offset: 1, color: '#391085' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(114, 46, 209, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(114, 46, 209, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.nsfwNumber'),
          type: 'bar',
          data: seriesData.processNumber,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#13c2c2' },
                { offset: 1, color: '#006d75' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(19, 194, 194, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(19, 194, 194, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.imageNumber'),
          type: 'bar',
          data: seriesData.imageNumber,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#faad14' },
                { offset: 1, color: '#ad6800' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(250, 173, 20, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(250, 173, 20, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.avatorNumber'),
          type: 'bar',
          data: seriesData.avatorNumber,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#eb2f96' },
                { offset: 1, color: '#9e1068' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(235, 47, 150, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(235, 47, 150, 0.5)',
            },
          },
        },
      ],
    });
  };

  // 更新每日总量图表
  const updateDailyTotalChart = () => {
    const { xAxisData, seriesData } = processDailyTotalData();

    setDailyTotalOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: 'rgba(150, 150, 150, 0.2)',
          },
        },
        backgroundColor: 'rgba(255, 255, 255, 0.98)',
        borderColor: '#e8e8e8',
        borderWidth: 1,
        padding: [12, 16],
        textStyle: {
          color: '#333',
          fontSize: 12,
        },
        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 6px;',
        formatter: function (params: any) {
          if (!params || params.length === 0) return '';
          let result = `<div style="font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">${t('workbenchChart.time')}: ${params[0].name}</div>`;
          params.forEach((item: any) => {
            result += `<div style="margin: 4px 0;">${item.marker}<span style="margin-left: 8px;">${item.seriesName}: <span style="font-weight: 600; color: ${item.color};">${item.value}</span></span></div>`;
          });
          return result;
        },
      },
      legend: {
        data: [
          t('workbenchChart.listTask'),
          t('workbenchChart.detailTask'),
          t('workbenchChart.nsfwNumber'),
          t('workbenchChart.imageNumber'),
          t('workbenchChart.avatorNumber'),
        ],
        top: 10,
        itemGap: 15,
        textStyle: {
          fontSize: 11,
          color: '#666',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '18%',
        containLabel: true,
        backgroundColor: '#fff',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisLabel: {
          rotate: 0,
          interval: 0,
          fontSize: 11,
          color: '#666',
          margin: 8,
        },
        axisLine: {
          lineStyle: {
            color: '#e8e8e8',
            width: 1,
          },
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#e8e8e8',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#666',
          fontSize: 11,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed',
            width: 1,
          },
        },
      },
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut',
      series: [
        {
          name: t('workbenchChart.listTask'),
          type: 'line',
          smooth: true,
          data: seriesData.listTaskNumber,
          itemStyle: {
            color: '#1890ff',
          },
          lineStyle: {
            width: 2,
            color: '#1890ff',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
                { offset: 1, color: 'rgba(24, 144, 255, 0.05)' },
              ],
            },
          },
          symbol: 'circle',
          symbolSize: 6,
        },
        {
          name: t('workbenchChart.detailTask'),
          type: 'line',
          smooth: true,
          data: seriesData.detailTaskNumber,
          itemStyle: {
            color: '#722ed1',
          },
          lineStyle: {
            width: 2,
            color: '#722ed1',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
                { offset: 1, color: 'rgba(114, 46, 209, 0.05)' },
              ],
            },
          },
          symbol: 'circle',
          symbolSize: 6,
        },
        {
          name: t('workbenchChart.nsfwNumber'),
          type: 'line',
          smooth: true,
          data: seriesData.processNumber,
          itemStyle: {
            color: '#13c2c2',
          },
          lineStyle: {
            width: 2,
            color: '#13c2c2',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(19, 194, 194, 0.3)' },
                { offset: 1, color: 'rgba(19, 194, 194, 0.05)' },
              ],
            },
          },
          symbol: 'circle',
          symbolSize: 6,
        },
        {
          name: t('workbenchChart.imageNumber'),
          type: 'line',
          smooth: true,
          data: seriesData.imageNumber,
          itemStyle: {
            color: '#faad14',
          },
          lineStyle: {
            width: 2,
            color: '#faad14',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(250, 173, 20, 0.3)' },
                { offset: 1, color: 'rgba(250, 173, 20, 0.05)' },
              ],
            },
          },
          symbol: 'circle',
          symbolSize: 6,
        },
        {
          name: t('workbenchChart.avatorNumber'),
          type: 'line',
          smooth: true,
          data: seriesData.avatorNumber,
          itemStyle: {
            color: '#eb2f96',
          },
          lineStyle: {
            width: 2,
            color: '#eb2f96',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(235, 47, 150, 0.3)' },
                { offset: 1, color: 'rgba(235, 47, 150, 0.05)' },
              ],
            },
          },
          symbol: 'circle',
          symbolSize: 6,
        },
      ],
    });
  };

  // 更新窗口运行数图表
  const updateWindowCountChart = () => {
    const { xAxisData, seriesData, originalTimes } = processWindowCountData();

    setWindowCountOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(150, 150, 150, 0.1)',
          },
        },
        backgroundColor: 'rgba(255, 255, 255, 0.98)',
        borderColor: '#e8e8e8',
        borderWidth: 1,
        padding: [12, 16],
        textStyle: {
          color: '#333',
          fontSize: 12,
        },
        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 6px;',
        formatter: function (params: any) {
          if (!params || params.length === 0) return '';
          const timeIndex = xAxisData.indexOf(params[0].name);
          const fullTime =
            originalTimes && originalTimes[timeIndex] ? originalTimes[timeIndex] : params[0].name;
          let result = `<div style="font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">${t('workbenchChart.time')}: ${fullTime}</div>`;
          params.forEach((item: any) => {
            result += `<div style="margin: 4px 0;">${item.marker}<span style="margin-left: 8px;">${item.seriesName}: <span style="font-weight: 600; color: ${item.color};">${item.value}</span></span></div>`;
          });
          const total = params.reduce((sum: number, item: any) => sum + (item.value || 0), 0);
          result += `<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; font-weight: 600; color: #1890ff;">${t('workbenchChart.total')}: ${total}</div>`;
          return result;
        },
      },
      legend: {
        data: [
          t('workbenchChart.busyNode'),
          t('workbenchChart.freeNode'),
          t('workbenchChart.offlineNode'),
          t('workbenchChart.abnormalNode'),
        ],
        top: 10,
        itemGap: 20,
        textStyle: {
          fontSize: 12,
          color: '#666',
        },
        icon: 'roundRect',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true,
        backgroundColor: '#fff',
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 0,
          interval: 0,
          fontSize: 11,
          color: '#666',
          margin: 8,
          formatter: function (value: string) {
            return value;
          },
        },
        axisLine: {
          lineStyle: {
            color: '#e8e8e8',
            width: 1,
          },
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#e8e8e8',
          },
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#666',
          fontSize: 11,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed',
            width: 1,
          },
        },
      },
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut',
      series: [
        {
          name: t('workbenchChart.busyNode'),
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          data: seriesData.busyNodes,
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#ffa940' },
                { offset: 1, color: '#ff7a00' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(255, 122, 0, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(255, 122, 0, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.freeNode'),
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          data: seriesData.freeNodes,
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#73d13d' },
                { offset: 1, color: '#52c41a' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(82, 196, 26, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(82, 196, 26, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.offlineNode'),
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          data: seriesData.offlineNodes,
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#bfbfbf' },
                { offset: 1, color: '#8c8c8c' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(140, 140, 140, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(140, 140, 140, 0.5)',
            },
          },
        },
        {
          name: t('workbenchChart.abnormalNode'),
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          data: seriesData.abnormalNodes,
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#ff7875' },
                { offset: 1, color: '#ff4d4f' },
              ],
            },
            shadowBlur: 8,
            shadowColor: 'rgba(255, 77, 79, 0.3)',
            shadowOffsetY: 2,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(255, 77, 79, 0.5)',
            },
          },
        },
      ],
    });
  };
  // 图表引用
  const todayDataChartRef = ref<HTMLDivElement | null>(null);
  const dailyTotalChartRef = ref<HTMLDivElement | null>(null);
  const windowCountChartRef = ref<HTMLDivElement | null>(null);

  // 获取图表实例
  const { setOptions: setTodayDataOptions } = useECharts(todayDataChartRef as Ref<HTMLDivElement>);
  const { setOptions: setDailyTotalOptions } = useECharts(
    dailyTotalChartRef as Ref<HTMLDivElement>,
  );
  const { setOptions: setWindowCountOptions } = useECharts(
    windowCountChartRef as Ref<HTMLDivElement>,
  );

  // 初始化图表
  const initCharts = () => {
    // 初始化今日数据量图表
    updateTodayDataChart();
    // 初始化每日总量图表
    updateDailyTotalChart();
    // 初始化窗口运行数图表
    updateWindowCountChart();
  };

  onMounted(() => {
    setTimeout(() => {
      loading.value = false;
      initCharts();
      // 初始化所有数据
      initTodayData();
      initDailyTotal();
      statisticNodeStatisticinit();
    }, 1500);
  });
</script>
